<template>
    <div class="geo" ref="geo"></div>
</template>

<script>
    import * as echarts from "echarts";
    import axios from "axios"

    export default {
        name: "ChinaMap",
        data(){
            return {
                geoData : null,
                userData : null,
                myChart :null
            }
        },
        mounted(){
            //1.初始化，获取echart实例
            this.myChart = echarts.init(this.$refs.geo);
            //2.注册地图并绘制数据
            this.initialMap();
            this.handleMapData();
        },
        methods : {
            // 配置地图背景
            async initialMap(){
                let geoData = await fetch("/json/china.geo.json").then(res=> res.json())
                echarts.registerMap("China", geoData);
            },
            // 配置地图数据
            async handleMapData(){
                this.myChart.showLoading();
                let userData = await fetch("/json/user.json").then(res=> res.json())
                //4.配置echart的响应式数据
                this.myChart.setOption({
                    title : {
                        text : "全国流感人数分布图",  // echart 标题
                        left : "center"
                    },
                    // 配置了该项，则鼠标移动上去会有提示语
                    // formatter 为文字提示格式，在本例中{b}表示数据名，{c}表示数据值
                    tooltip : {
                        formatter : '{b}流感感染人数：{c}人'
                    },
                    series : [
                        {
                            type : "map",  // 图表类型为：地图
                            map: 'China', // 使用注册的地图
                            roam: true, // 是否开启鼠标缩放和平移漫游
                            scaleLimit : { // 缩放比例控制
                                min: 0.7,  // 最小缩放到0.7倍
                                max: 3 // 最大缩放到3倍
                            },
                            data: userData, // 绑定业务数据（后端接口业务数据）
                        }
                    ],
                    visualMap : {
                        // 可视地图，一般用户会设置不同的颜色展示数据的差异
                        left : "left", // 可视地图显示的位置
                        top : "center",
                        min : 0,  // 区间数据的最小值
                        max: 10000, // 区间数据的最大值
                        text: ['高',"低"], // 文本，默认为数值文本
                        calculable: true, // 是否允许控制区间
                        inRange : {
                            color : [
                                "#313695",
                                "#4575b4",
                                "#74add1",
                                "#abd9e9",
                                "#e0f3f8",
                                "#ffffbf",
                                "#fee090",
                                "#fdae61",
                                "#f46d43",
                                "#d73027",
                                "#a50026",

                            ]
                        }
                    }
                })
                this.myChart.hideLoading(); // 数据处理好取消加载动画
            }
        },
        beforeDestroy(){
            this.myChart.dispose()
        }
    }
</script>

<style scoped>
    .geo {
        width: 900px;
        height: 600px;
        box-shadow: 1px 1px 5px #333;
        position: absolute;
        top: 80px;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
    }
</style>